<template>
  <div class="book-serach-res">
    <nav-bar :isFixed="false" :title="'查询结果'"></nav-bar>
    <div class="yes-res" v-if="searchRes">
      <img class="res-icon" src="@/assets/img/tongguo.png" alt />
      <div class="title">您查询的获奖情况属实</div>
      <div class="cont">获奖证书</div>
      <van-image
        @click="handBig(imgUrl + searchRes.imgUrl)"
        style="width:100%;height:360px;margin-top:20px;"
        :src="imgUrl + searchRes.imgUrl"
        fit="cover"
      />
    </div>
    <div class="no-res" v-else>
      <img class="res-icon" src="@/assets/img/weitongguo.png" alt />
      <div class="title">查询失败</div>
      <div class="cont">
        未查询到您输入的姓名和证书编号 请检查输入是否正确
      </div>
      <div class="btn" @click="handNavGo">重新查询</div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import { ImagePreview } from "vant";
export default {
  name: "ActivityList",
  components: {
    navBar
  },
  data() {
    return {
      searchRes: {},
      imgUrl: config.imgUrl
    };
  },
  mounted() {
    this.searchRes = this.$route.query.searchRes;
    if (this.searchRes) {
      this.searchRes = JSON.parse(this.searchRes);
    }
    console.log(this.$route.query, "????");
  },
  methods: {
    handBig(url) {
      ImagePreview([url]);
    },
    handNavGo() {
      this.$router.go(-1);
    },
    async onSubmit() {
      let res = await this.$request({
        url: "/certificate/findCertificate",
        method: "post",
        data: this.form
      });
      console.log(res);
    }
  }
};
</script>

<style lang="scss">
@import "../assets/css/base";
.book-serach-res {
  text-align: center;
  .yes-res {
    padding: 0 px2rem(30);
    box-sizing: border-box;
  }
  .title {
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
    font-size: px2rem(36);
  }
  .cont {
    font-size: px2rem(32);
    color: #666;
    line-height: 22px;
    width: px2rem(490);
    margin: 0 auto;
  }
  .btn {
    width: px2rem(490);
    margin: 0 auto;
    background-color: #0050a5;
    font-size: px2rem(32);
    color: #fff;
    line-height: px2rem(88);
    height: px2rem(88);
    border-radius: 12px;
    margin-top: 100px;
  }
  .res-icon {
    width: px2rem(130);
    height: px2rem(130);
    margin-bottom: 40px;
    margin-top: 120px;
  }
}
</style>
